const masonry = document.querySelector('.home-box');
const divider1 = home - box.querySelector('.divider1');

let pageSize = 12;
let video1Count = 0;
let colHeights = [0, 0, 0, 0];
let observer;


function loadData() {
    for (let i = 0; i < pageSize; i++) {
        createCard(i);
    }
}

loadData();

async function createCard(i) {
    const video1 = document.createElement('div');
    video1.classList.add('video1');
    video1.style.position = 'fixed';
    video1.style.top = 0;
    video1.style.left = 0;
    video1.style.visibility = 'hidden';

    const img = await loadImage();
    if (img) {
        video1.append(img);
        document.body.appendChild(video1);
        const video1Index = video1Count;
        const colIndex = (video1Index + 1) % 4;
        const video1Height = video1.clientHeight;
        colHeights[colIndex] += video1Height;
        setMasonryHeight();
        masonry.insertBefore(video1, divider1);

        video1.style.position = '';
        video1.style.visibility = '';
        video1.classList.add('show');
        video1Count++;

        if (i === pageSize - 1) {
            observe(video1);
        }
    }
}

function observe(video1) {
    if (!observer) {
        observer = new IntersectionObserver(entries => {
            if (entries.length === 1 && entries[0].isIntersecting) {
                loadData();
                observer.unobserve(entries[0].target);
            }
        });
    }
    observer.observe(video1);
}

async function createCard(i) {
    const video1 = document.createElement('div');
    video1.classList.add('video1');
    video1.style.position = 'fixed';
    video1.style.top = 0;
    video1.style.left = 0;
    video1.style.visibility = 'hidden';
    const img = await loadImage();

    if (img) {
        video1.append(img);
        document.body.append(video1);
        const video1Index = video1Count;
        const colIndex = (video1Index + 1) % 4;
        const video1Height = video1.clientHeight;
        colHeights[colIndex] += video1Height;
        setMasonryHeight();
        masonry.insertBefore(video1, divider1);
        video1Count++;

        video1.style.position = '';
        video1.style.visibility = '';
        if (i === pageSize - 1) {
            observe(video1);
        }
    }
}

async function loadImage() {
    const img = document.createElement('img');
    const randomHeight = Math.round(Math.random() * 500) + 300;
    const src = `https://p3-pc-sign.douyinpic.com/image-cut-tos-priv/b0dc3d4181524ff6853d0fcce7d50b1e~tplv-dy-resize-origshort-autoq-75:330.jpeg?biz_tag=pcweb_cover&from=3213915784&s=PackSourceEnum_DOUYIN_WEB_NEW_PAGE&sc=cover&se=false&x-expires=2001391200&x-signature=zOrnKyilbk2xAPk3nefY2h2U%2BvY%3D
  `;
    return new Promise((resolve, reject) => {
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = src;
    });
}

function setMasonryHeight() {
    masonry.style.height = Math.max(...colHeights) + 10 + 'px';
}

function resetMasonryHeight() {
    colHeights = [0, 0, 0, 0];
    document.querySelectorAll('.video1').forEach((video1, index) => {
        const video1Height = video1.clientHeight;
        const colIndex = (index + 1) % 4;
        colHeights[colIndex] += video1Height;
    });
    setMasonryHeight();
}

window.addEventListener('resize', resetMasonryHeight);